import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import { Button, Form } from "antd";
import { WeaTop, WeaRightMenu, WeaTab, WeaSearchGroup, WeaFormItem, WeaTools,WeaNewScroll } from "ecCom";
import { WeaSwitch, WeaTableNew } from "comsMobx";
import * as Bctt from "../constants/BaseListConstant";

const WeaTable = WeaTableNew.WeaTable;

class BaseList extends React.Component {
    constructor(props) {
        super(props);
    }

    getStore() {

    }

    // render before
    componentWillMount() {
        this.getStore().componentWillMount(this.props.params);
    }

    // render after
    componentDidMount() {
        this.getStore().componentDidMount();
    }

    // component remove before
    componentWillUnmount() {
        this.getStore().componentWillUnmount();
    }

    componentWillReceiveProps(nextProps) {
        const store = this.getStore();
        const oldType = store.routerParams.type;
        const newType = nextProps.params.type;
        const keyOld = this.props.location.key;
		const keyNew = nextProps.location.key;
		// 切换路由或者点击菜单路由刷新组件
        if (oldType !== newType || keyOld !== keyNew) {
            // component reload
            this.getStore().componentWillUnmount();
            this.getStore().componentWillMount(nextProps.params);
            this.getStore().componentDidMount();
        }        
    }

    render() {
        const store = this.getStore();
        const { loading, viewTop, titleName, titleIcon, showSearchAd, tableStore, searchKey } = store;
        let weaTableProps = {};//WeaTable中的属性集
        weaTableProps.comsWeaTableStore = tableStore;
        weaTableProps.hasOrder = true;
        weaTableProps.needScroll = true;
        if (this.reRenderColumns)
            weaTableProps.getColumns = c => this.reRenderColumns(c);
        if (this.onOperatesClick)
            weaTableProps.onOperatesClick = (record,index,operate,flag) => this.onOperatesClick(record,index,operate,flag);

        let tableCom = <WeaTable  {...weaTableProps} />

        const searchTypes = this.getTabSearchTypes(store);
        let hasBase = false;
        let hasAdvanced = false;
        for (let t in searchTypes) {
            if (searchTypes[t] == Bctt.TAB_SEARCH_TYPE_BASE) {
                hasBase = true;
            }
            if (searchTypes[t] == Bctt.TAB_SEARCH_TYPE_ADVANCED) {
                hasAdvanced = true;
            }
        }
        let tabCom = null;
        let weaTabProps = {};//WeaTab中的属性集
        weaTabProps.buttons = this.getTabButtons(store);
        weaTabProps.searchType = searchTypes;
        let showWeaTab = false;
        if (hasBase) {
            showWeaTab = true;
            weaTabProps.searchsBaseValue = searchKey;
            weaTabProps.onSearch = store.doSearch;
            weaTabProps.onSearchChange = v => store.setSearchKey(v);
        }

        if (hasAdvanced) {
            showWeaTab = true;
            weaTabProps.showSearchAd = showSearchAd;
            weaTabProps.buttonsAd = this.getAdButtons(store);
            weaTabProps.setShowSearchAd = bool => { store.setShowSearchAd(bool) };
            weaTabProps.hideSearchAd = () => store.setShowSearchAd(false);
            weaTabProps.searchsAd = <Form horizontal>{this.getSearchConditionForm(store)}</Form>;
        }
        if (showWeaTab)
            tabCom = <WeaTab {...weaTabProps} />;

        return (
            <div className="wea-crmReport-base" style={{height:"100%"}}>
                <WeaRightMenu datas={store.getRightMenus()}>
                    {
                        viewTop && <WeaTop
                            loading={loading}
                            title={titleName}
                            icon={<i className={"icon-coms-crm"}/>}
                            iconBgcolor="#96358a"
                            showDropIcon={true}
                            dropMenuDatas={store.getRightMenus()}
                            buttons={store.getTopButtons()}
                            buttonSpace={10}
                        >
                        {tabCom}
                        {tableCom}
                        {this.renderAppend(store)}
                        </WeaTop>
                    }
                    {
                        !viewTop && <div>
                        {tabCom}
                        {tableCom}
                        {this.renderAppend(store)}
                        </div>
                    }
                </WeaRightMenu>
            </div>
        )
    }

    // render custom
    renderAppend(store) {
        return [];
    }

    getAdButtons(store) {
        const { doSearch, setShowSearchAd, clearAdFields } = store;
        return [
            (<Button type="primary" onClick={() => { doSearch(); setShowSearchAd(false); }}>搜索</Button>),
            (<Button type="ghost" onClick={() => { clearAdFields(); }}>重置</Button>),
            (<Button type="ghost" onClick={() => { setShowSearchAd(false); }}>取消</Button>)
        ];
    }

    getTabButtons(store) {
        let arr = [];
        return arr;
    }

    getTabSearchTypes(store) {
        let arr = [];
        return arr;
    }

    getSearchConditionForm(store) {
        const { searchConditionComponents, searchConditionForm } = store;
        let groups = [];
        if (searchConditionComponents) {
            const { isFormInit } = searchConditionForm;
            const formParams = searchConditionForm.getFormParams();
            isFormInit && toJS(searchConditionComponents).map(c => {
                let items = [];
                c.items.map((fields, index) => {
                    items.push({
                        com: (<WeaFormItem
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            wrapperCol={{ span: `${fields.fieldcol}` }}>
                            <WeaSwitch fieldConfig={fields} form={searchConditionForm} formParams={formParams} onChange={store.searchConditionFieldChange} />
                        </WeaFormItem>),
                        col: 2,
                    })
                });
                groups.push(<WeaSearchGroup needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />)
            });
        }
        return groups;
    }
}

export default BaseList;